import baidu from "./assets/baidu.png";
import "./App.css";
import Search from "antd/es/input/Search";
import { AutoComplete } from "antd";
import {
  AudioOutlined,
  CameraOutlined,
  CloseOutlined,
} from "@ant-design/icons";
import { useEffect, useState } from "react";

function App() {
  const [options, setOptions] = useState([]);
  const [show, setShow] = useState(false);
  const [inputText, setInputText] = useState("");
  let anotherOptions = [
    {
      value: "中国银行",
      id: 1,
    },
    {
      value: "中国邮政",
      id: 2,
    },
    {
      value: "中国移动",
      id: 3,
    },
    {
      value: "上海天气",
      id: 4,
    },
    {
      value: "中国电信",
      id: 5,
    },
    {
      value: "上海市政府",
      id: 6,
    },
    {
      value: "上海人口",
      id: 7,
    },
    {
      value: "北京天气",
      id: 8,
    },
    {
      value: "北京时间",
      id: 9,
    },
    {
      value: "北京旅游攻略",
      id: 10,
    },
  ];
  // 图标
  let icon = (
    <div>
      <CloseOutlined
        onClick={() => {
          setInputText("");
          setOptions([]);
        }}
        style={{ marginRight: "10px", visibility: show ? "visible" : "hidden" }}
      />
      <AudioOutlined style={{ marginRight: "10px" }} />
      <CameraOutlined />
    </div>
  );

  const searchResult = (value) => {
    return anotherOptions.filter((item) => {
      console.log(item);
      return item.value.startsWith(value);
    });
  };
  const handleSearch = (value) => {
    setOptions(value ? searchResult(value) : []);
  };
  useEffect(() => {
    if (inputText + "" !== "") {
      setShow(true);
    } else {
      setShow(false);
    }
  }, [inputText]);
  return (
    <div className="App">
      <div className="contentWrapper">
        <div className="logoWrapper">
          <img src={baidu} alt={1} />
        </div>
        <div className="mainWrapper">
          <AutoComplete
            onSelect={(value, option) => {
              setInputText(value);
            }}
            defaultOpen={false}
            value={inputText}
            options={options}
            onSearch={handleSearch}
            // onSearch={(text) => setAnotherOptions(getPanelValue(text))}
          >
            <Search
              className="searchWrapper"
              enterButton={"百度一下"}
              value={inputText}
              style={{
                width: "546px",
                height: "44px",
              }}
              onChange={(value) => {
                setInputText(value.target.value);
              }}
              suffix={icon}
            />
          </AutoComplete>
        </div>
      </div>
    </div>
  );
}

export default App;
